<template>
    <div class="allocationPeople">
        <van-nav-bar
                title="分配负责人"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <checkboxGroup :selectType="0" :labelText="'选择业务专员'" :nameVal="salesmanName" :dataSource="salesmanSource"
                       :dataVal="salesmanValArr" @selectResult="selectResult" v-if="LoadComplete"/>
        <checkboxGroup :selectType="1" :labelText="'选择客服专员'" :nameVal="customerName" :dataSource="customerSource"
                       :dataVal="customerValArr" @selectResult="selectResult" v-if="LoadComplete"/>
        <checkboxGroup :selectType="2" :labelText="'选择财务专员'" :nameVal="financeName" :dataSource="financeSource"
                       :dataVal="financeValArr" @selectResult="selectResult" v-if="LoadComplete"/>
        <checkboxGroup :selectType="3" :labelText="'选择工伤专员'" :nameVal="compensateName" :dataSource="compensateSource"
                       :dataVal="compensateValArr" @selectResult="selectResult" v-if="LoadComplete"/>
        <div @click="pushInfo" class="line-btn" style="margin-top: 10px;">保存</div>
    </div>
</template>

<script>
    import checkboxGroup from '@/components/checkboxGroup.vue'
    // import headerItem from '@/components/header.vue'

    export default {
        name: "csAllocationPeople",
        components: {
            checkboxGroup, checkboxGroup
        },
        data() {
            return {
                LoadComplete: false,

                salesmanName: '',
                salesmanValArr: [],
                salesmanSource: [],

                customerName: '',
                customerValArr: [],
                customerSource: [],

                financeName: '',
                financeValArr: [],
                financeSource: [],

                compensateName: '',
                compensateValArr: [],
                compensateSource: [],
            }
        },
        methods: {
            selectResult(type, title, Arr, val3) {
                if (type == 0) {
                    this.salesmanName = title
                    this.salesmanValArr = Arr
                }
                if (type == 1) {
                    this.customerName = title
                    this.customerValArr = Arr
                }
                if (type == 2) {
                    this.financeName = title
                    this.financeValArr = Arr
                }
                if (type == 3) {
                    this.compensateName = title
                    this.compensateValArr = Arr
                }
            },
            // 客服类型
            onKefu(value, index) {
                this.salesmanIndex = index;
                this.salesmanName = value.name
                this.salesmanPickerShow = false;
            },
            getConfig() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                };
                this.$post("/api/member/distribution", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.salesmanSource = res.data.salesman // 业务专员
                            this.customerSource = res.data.customer // 客服专员
                            this.financeSource = res.data.finance // 财务专员
                            this.compensateSource = res.data.compensate // 工伤专员

                            // 筛选 业务专员选中的选项
                            let salesmanValArr = []
                            let salesmanNameArr = []
                            res.data.salesman.map((item, index) => {
                                if (item.selected) {
                                    salesmanValArr.push(item.value)
                                    salesmanNameArr.push(item.name)
                                }
                            })
                            this.salesmanValArr = salesmanValArr
                            this.salesmanName = salesmanNameArr.toString(',')
                            // 筛选 客服专员选中的选项
                            let customerValArr = []
                            let customerNameArr = []
                            res.data.customer.map((item, index) => {
                                if (item.selected) {
                                    customerValArr.push(item.value)
                                    customerNameArr.push(item.name)
                                }
                            })
                            this.customerValArr = customerValArr
                            this.customerName = customerNameArr.toString(',')
                            // 筛选 财务专员选中的选项
                            let financeValArr = []
                            let financeNameArr = []
                            res.data.finance.map((item, index) => {
                                if (item.selected) {
                                    financeValArr.push(item.value)
                                    financeNameArr.push(item.name)
                                }
                            })
                            this.financeValArr = financeValArr
                            this.financeName = financeNameArr.toString(',')
                            // 筛选 工伤专员选中的选项
                            let compensateValArr = []
                            let compensateNameArr = []
                            res.data.compensate.map((item, index) => {
                                if (item.selected) {
                                    compensateValArr.push(item.value)
                                    compensateNameArr.push(item.name)
                                }
                            })
                            this.compensateValArr = compensateValArr
                            this.compensateName = compensateNameArr.toString(',')


                            this.LoadComplete = true
                            this.$Toast.clear();
                        }
                    })
                    .catch(err => {
                    });
            },
            onPopupClickRight(type) {
                if (type == 0) {
                    let nameArr = []
                    this.salesmanSource.map((item, index) => {
                        if (this.salesmanValArr.includes(item.value)) {
                            nameArr.push(item.name);
                        }
                    })
                    this.salesmanName = nameArr.toString(',')
                    this.salesmanPickerShow = false
                }
                if (type == 1) {
                    let nameArr = []
                    this.customerSource.map((item, index) => {
                        if (this.customerValArr.includes(item.value)) {
                            nameArr.push(item.name);
                        }
                    })
                    this.customerName = nameArr.toString(',')
                    this.customerPickerShow = false
                }
            },
            pushInfo() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    salesman_id: this.salesmanValArr.toString(','),
                    customer_id: this.customerValArr.toString(','),
                    finance_id: this.financeValArr.toString(','),
                    compensate_id: this.compensateValArr.toString(','),
                };
                this.$post("/api/member/save_distribution", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast(res.msg);
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {
                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => {
                    });
            }
        },
        created() {
            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });
            this.getConfig();
        },
    }
</script>

<style lang="less" scoped>
    .allocationPeople {
        height: 100vh;
        background: #f8f8f8;
    }
</style>